<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var arr = ['red ', 'skyblue', 'blue']
        var sum = 0
        $('div').each(function (i, domEle) {//each等同于for循环 i为索引 domEle为操作的dom元素对象
            // console.log(index);
            // 回调函数第一个参数是索引号 可以自定义名称
            // console.log(i);
            // 第二个参数是dom对象 可以自定义
            // console.log(domEle);
            // domEle.css('color')//dom对象没有jquery css（）方法
            // $(domEle).css('color', 'blue')//用$包裹dom对象转换为jquery对象就可以使用jquery方法css（）方法了
            // $(domEle).css('color', arr[i])
            // sum += parseInt($(domEle).text())
            // console.log(sum);
        })
        // 2.$.each()方法变遍历元素 主要用于遍历数据 处理数据
        $.each($('div'), function (i, ele) {
            console.log(i);
            console.log(ele);
        })
        //   遍历数组
        //   $.each(arr,function(i,ele) {
        //     console.log(i);
        //     console.log(ele);
        //   })
        // 遍历对象
        $.each({
            name: 'andy',
            age: 18,
        }, function (i, ele) {
            console.log(i);//输出的是属性名
            console.log(ele);//输出的是属性值
        })
        // 总结
        //  如果遍历的是dom对象使用each()
        //  遍历数组,对象使用$.each()

    </script>
</body>

</html>